<template>
	<view>
		<view class="content" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd">
			<text class="title">time:{{time}}</text>
			<text class="title"> 总分 {{total}}</text>
			<view class="background">
				<view class="text-area" v-for="(item,index) in datas" v-bind:key="index">
					<view class="text-area" v-for="(val,idx) in item" v-bind:key="idx">
						<text class="cols0" v-if="val == 0"></text>
						<text class="cols0" :class="'cols'+val" v-else>{{val}}</text>
					</view>
				</view>
			</view>
			<view>
				<!-- 提示信息弹窗 -->
				<uni-popup ref="message" type="message">
					<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
				</uni-popup>
			</view>
		</view>
		<view>
			<button @click="getcurrentData" v-if="currentDatas.show">上一步</button>
			</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				msgType: 'success',
				messageText: '这是一条成功提示',
				datas: [],
				lock: false,
				gameOver: false,
				pad: 4,
				time: 0,
				total: 0,
				touchS: [0, 0],
				touchE: [0, 0],
				initNumber: [2, 4],
				stepNum: 0,
				currentDatas: {
					show: false,
					datas: [],
					total: 0,
					stepNum: 0
				}
			}
		},
		onLoad() {

		},
		mounted() {
			//监听键盘
			this.keyDown()
			this.messageToggle("游戏开始")

		},
		onReady() {},
		methods: {
			messageToggle(msg) {
				this.msgType = 'success'
				this.messageText = msg
				this.$refs.message.open()
			},
			//随机获取 2 4
			randomNum() {
				let count = 0;
				if (Math.random(0, 1) > 0.5) {
					count = 1
				}
				return this.initNumber[count]
			},
			randomCeil() {
				let items = []
				let count = 0;
				for (let line = 0; line < this.pad; line++) {
					for (let col = 0; col < this.pad; col++) {
						if (this.datas[line][col] == 0) {
							items[count] = [line, col]
							count++
						}
					}
				}
				let randomItem = items[Math.floor(Math.random() * items.length)]
				return randomItem
			},
			addCeil() {
				let randomItem = this.randomCeil()
				//console.log('randomItem', randomItem)
				if (randomItem == undefined) {
					return false
				}
				this.datas[randomItem[0]][randomItem[1]] = this.randomNum()
			},
			isEnd() {
				if (this.gameOver) {
					return false
				}
				for (let line = 0; line < this.pad - 1; line++) {
					for (let col = 0; col < this.pad - 1; col++) {
						if (this.datas[line][col] == 0 ||
							this.datas[line][col] == this.datas[line + 1][col] ||
							this.datas[line][col] == this.datas[line][col + 1]) {
							return true
						}
					}
				}
				for (let line = 0; line < this.pad - 1; line++) {
					if (this.datas[line][this.pad - 1] == 0 ||
						this.datas[line][this.pad - 1] == this.datas[line + 1][this.pad - 1]) {
						return true
					}
				}
				for (let col = 0; col < this.pad - 1; col++) {
					if (this.datas[this.pad - 1][col] == 0 ||
						this.datas[this.pad - 1][col] == this.datas[line + 1][col + 1]) {
						return true
					}
				}

				console.log("游戏结束")
				this.messageToggle("游戏结束")
				this.gameOver = true
				return false
			},
			init() {
				for (let line = 0; line < this.pad; line++) {
					this.datas[line] = [];
					for (let col = 0; col < this.pad; col++) {
						this.datas[line][col] = 0;
					}
				}
				this.addCeil()
				this.time = Math.ceil(Math.random() * 1000000);
			},
			keyDown() {
				this.init()
				document.onkeydown = (e) => {
					//事件对象兼容
					let e1 = e || event || window.event || arguments.callee.caller.arguments[0]
					//键盘按键判断:左箭头-37;上箭头-38；右箭头-39;下箭头-40				  
					switch (e1.keyCode) {
						case 37: //左
							this.left()
							break;
						case 38: //上
							this.up()
							break;
						case 39: //右
							this.right()
							break;
						case 40: //下
							this.down()
							break;
					}
				}
			},
			addTotal(num) {
				this.total += num
			},
			setcurrentData() {
				console.log("setcurrentData1")
				this.currentDatas.datas = JSON.parse(JSON.stringify(this.datas))
				this.currentDatas.stepNum = JSON.parse(JSON.stringify(this.stepNum))
				this.currentDatas.total = JSON.parse(JSON.stringify(this.total))
				console.log("setcurrentData2", this.currentDatas)
				this.currentDatas.show = true
				return true
			},
			getcurrentData() {
				console.log("getcurrentData3", this.currentDatas)
				this.stepNum = JSON.parse(JSON.stringify(this.currentDatas.stepNum))
				this.total = JSON.parse(JSON.stringify(this.currentDatas.total))
				this.datas = JSON.parse(JSON.stringify(this.currentDatas.datas))

				this.currentDatas.datas = []
				this.currentDatas.show = false
				this.gameOver = false

				console.log("getcurrentData4", this.datas)
			},
			left() {
				if (this.lock || this.gameOver) {
					return false
				}
				this.lock = true
				let addFlag = false;
				for (let line = 0; line < this.pad; line++) {
					let last_pos = 0; //上一次处理位置
					for (let col = 1; col < this.pad; col++) {
						for (let tmp = last_pos; tmp < col; tmp++) {
							if (this.datas[line][col] == 0) {
								continue;
							}
							if (this.datas[line][tmp] == this.datas[line][col]) {
								if (this.setcurrentData()) {
									this.datas[line][tmp] = this.datas[line][col] * 2;
									this.datas[line][col] = 0;
									//总分
									this.addTotal(this.datas[line][tmp])

									last_pos = tmp + 1;
									addFlag = true;
								}
								break;
							} else if (this.datas[line][tmp] != 0) {
								last_pos++;
							} else {
								if (this.setcurrentData()) {
									this.datas[line][last_pos] = this.datas[line][col]
									this.datas[line][col] = 0;
									addFlag = true;
								}
							}
						}
					}
				}
				console.log('addFlag', )
				addFlag && this.addCeil()
				this.time = Math.ceil(Math.random() * 1000000);
				this.lock = false
				this.isEnd()
			},
			right() {
				if (this.lock || this.gameOver) {
					return false
				}
				this.lock = true
				let addFlag = false;
				for (let line = 0; line < this.pad; line++) {
					let last_pos = this.pad - 1; //上一次处理位置
					for (let col = this.pad - 2; col >= 0; col--) {
						for (let tmp = last_pos; tmp > col; tmp--) {
							if (this.datas[line][col] == 0) {
								continue;
							}
							if (this.datas[line][tmp] == this.datas[line][col]) {
								if (this.setcurrentData()) {
									this.datas[line][tmp] = this.datas[line][col] * 2;
									this.datas[line][col] = 0;
									//总分								
									this.addTotal(this.datas[line][tmp])
									last_pos = tmp - 1;
									addFlag = true;
								}
								break;
							} else if (this.datas[line][tmp] != 0) {
								last_pos--;
							} else {
								if (this.setcurrentData()) {
									this.datas[line][last_pos] = this.datas[line][col];
									this.datas[line][col] = 0;
									addFlag = true;
								}
							}
						}
					}
				}
				addFlag && this.addCeil()
				this.time = Math.ceil(Math.random() * 1000000);
				this.lock = false
				this.isEnd()
			},
			up() {
				if (this.lock || this.gameOver) {
					return false
				}
				this.lock = true
				let addFlag = false;
				for (let col = 0; col < this.pad; col++) {
					let last_pos = 0; //上一次处理位置
					for (let line = 1; line < this.pad; line++) {
						for (let tmp = last_pos; tmp < line; tmp++) {
							if (this.datas[line][col] == 0) {
								continue;
							}
							if (this.datas[tmp][col] == this.datas[line][col]) {
								if (this.setcurrentData()) {
									this.datas[tmp][col] = this.datas[line][col] * 2;
									this.datas[line][col] = 0;

									//总分
									this.addTotal(this.datas[tmp][col])
									last_pos = tmp + 1;
									addFlag = true;
								}
								break;
							} else if (this.datas[tmp][col] != 0) {
								last_pos++;
							} else {
								if (this.setcurrentData()) {
									this.datas[last_pos][col] = this.datas[line][col];
									this.datas[line][col] = 0;
									addFlag = true;
								}
							}
						}
					}
				}
				addFlag && this.addCeil()
				this.time = Math.ceil(Math.random() * 1000000);
				this.lock = false
				this.isEnd()
			},
			down() {
				if (this.lock || this.gameOver) {
					return false
				}
				this.lock = true
				let addFlag = false;
				for (let col = 0; col < this.pad; col++) {
					let last_pos = this.pad - 1; //上一次处理位置
					for (let line = this.pad - 2; line >= 0; line--) {
						for (let tmp = last_pos; tmp > line; tmp--) {
							if (this.datas[line][col] == 0) {
								continue;
							}
							if (this.datas[tmp][col] == this.datas[line][col]) {
								if (this.setcurrentData()) {
									this.datas[tmp][col] = this.datas[line][col] * 2;
									this.datas[line][col] = 0;
									//总分
									this.addTotal(this.datas[tmp][col])
									last_pos = tmp - 1;
									addFlag = true;
								}
								break;
							} else if (this.datas[tmp][col] != 0) {
								last_pos--;
							} else {
								if (this.setcurrentData()) {
									this.datas[last_pos][col] = this.datas[line][col];
									this.datas[line][col] = 0;
									addFlag = true;
								}
							}
						}
					}
				}
				addFlag && this.addCeil()
				this.time = Math.ceil(Math.random() * 1000000);
				this.lock = false
				this.isEnd()
			},
			touchStart(e) {
				let sx = e.touches[0].clientX
				let sy = e.touches[0].clientY
				this.touchS = [sx, sy]
			},
			touchMove(e) {
				let sx = e.touches[0].clientX
				let sy = e.touches[0].clientY
				this.touchE = [sx, sy]
			},
			touchEnd(e) {
				let start = this.touchS
				let end = this.touchE
				if (Math.abs(start[0] - end[0]) > Math.abs(start[1] - end[1])) {
					if (start[0] < end[0]) {
						this.right()
					} else if (start[0] > end[0]) {
						this.left()
					}
				} else if (Math.abs(start[0] - end[0]) < Math.abs(start[1] - end[1])) {
					if (start[1] < end[1]) {
						this.down()
					} else if (start[1] > end[1]) {
						this.up()
					}
				}
			}
		}
	}
</script>

<style>
	html {
		overflow: hidden;
	}

	uni-page-head {
		display: none !important;
	}

	.uni-page-head {
		display: none !important;
	}

	.content {
		overflow: hidden;
		width: 80vw;
		margin: 0 auto;
		text-align: center;
		padding-top: 10vh;

		/* display: flex; */
		/* margin-top: 10vh; */
	}

	.text-area {
		display: flex;
		justify-content: center;
		line-height: 12vw;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.background {
		background-color: #C1AF9E;
	}

	.cols0 {
		font-size: 36rpx;
		text-align: center;
		width: 18vw;
		height: 18vw;
		line-height: 18vw;
		/* border: 3rpx solid grey; */
		border-radius: 21rpx;
		margin: 7rpx;
		background-color: #CDC1B3;
		color: white;
		font-weight: 600;
		font-size: 6vw;
	}

	.cols2 {
		background-color: #EFE5DA;
		color: #796D65;
	}

	.cols4 {
		background-color: #EDDCBE;
		color: #796D65;
	}

	.cols8 {
		background-color: #F3B179;
		color: #FFFFFF;
	}

	.cols16 {
		background-color: #F7925D;
	}

	.cols32 {
		background-color: #F57657;
	}

	.cols64 {
		background-color: #F4522C;
	}

	.cols128 {
		background-color: #EDCF72;
	}

	.cols256 {
		background-color: #E7D151;
	}

	.cols512 {
		background-color: #CEA30B;
	}

	.cols1024 {
		background-color: #E6B405;
	}

	.cols2048 {
		background-color: #B64F25;
	}

	.cols4096 {
		background-color: #FF4A04;
	}
</style>
